<template>
	<view class="container">
		<u-navbar :is-back="false" :title="title" title-color="white" :background="background"></u-navbar>

		<view class="selecter">
			<u-card margin="30rpx" padding="40" v-if="!noData" v-for="item in data" :key="item.id">
				<view class="u-flex u-row-between" slot="head">
					<view class="day">
						{{item.create_time|date}}
					</view>
					<view class="income">
						收入:{{item.income|numFilter}}
					</view>
					<view class="consume">
						支出:{{item.consume|numFilter}}
					</view>
				</view>
				<view class="u-flex u-row-between" slot="body">
					<view class="">
						<u-icon name="red-packet" color="#ff877a" size="40"></u-icon>
					</view>
					<view class="">
						<view class="">
							{{item.desc}}
						</view>
						<view class="u-tips-color u-font-12">
							{{item.create_time|date('hh:MM')}}
						</view>
					</view>
					<view class="">
						{{item.op_change|numFilter}}
					</view>
				</view>
			</u-card>
			<u-loadmore :status="status" :load-text="loadText" v-if="!noData" />
			<u-empty class text="暂无数据" mode="list" margin-top="100" v-if="noData"></u-empty>
		</view>

		<view class="content">

		</view>
		<view>
			<uni-fab :popMenu="false" horizontal="right" @fabClick="fabClick"></uni-fab>
		</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		data() {
			return {
				title: "首页",
				background: {
					backgroundImage: "linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)"
				},
				page: 1,
				data: [],
				noData: false,
				status: "loadmore",
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '到底了'
				}
			}
		},
		onLoad() {
			this.getInfoList()
		},
		methods: {
			// 悬浮球点击
			fabClick() {
				// #ifdef MP
				let token = uni.getStorageSync("token")
				if (!token) {
					this.login('fabClick') 
				} else {
					this.$u.route("pages/add_info/add_info")
				}
				// #endif
				// #ifndef MP
				uni.showToast({
					title: "暂时只有小程序支持",
					icon: "none",
					mask: true
				})
				// #endif
			},
			// 获取记账本列表
			getInfoList(page = 1) {
				let that = this
				let token = uni.getStorageSync("token")
				let id = uni.getStorageSync("id") 
				if (!token) {
					this.page = 1
					this.data = []
					this.noData = true
					this.status = "nomore"
				} else {
					uniCloud.callFunction({
						name:"select",
						data: {
							id:id,
							page: that.page
						}
					}).then(function (res) {
						if (that.page == 1) {
							that.data = []
						}
						if (that.page == 1 && res.result.data.length == 0) {
							that.noData = true
							that.status = "nomore"
						} else {
							if (res.result.data.length < 10) {
								that.status = "nomore"
							}
							that.noData = false
							if (res.result.data.length == 0) {
								that.status = "nomore"
							}
						}
						that.data.push(...res.result.data)
					})
				}
			},
			login(functions) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res && res.code) {
							uniCloud.callFunction({
								name: 'login-by-wx',
								data: {code: res.code}
							}).then(function (res1) {
								if (res1.success) {
									uni.setStorageSync("id", res1.result.uid)
									uni.setStorageSync("openid", res1.result.openid)
									uni.setStorageSync("token", res1.result.token)
									uni.showToast({
										title: '登录成功',
										icon: "none",
										mask: true
									});
								} else {
									uni.showToast({
										title: '出现问题了',
										icon:"none",
										mask:true
									})
								}
							})
						} else {
							uni.showToast({
								title: '出现问题了',
								icon: "none",
								mask: true
							});
						}
					}
				});
			},
			onReachBottom() {
				let that = this
				that.page++
				that.getInfoList()
			},
			onPullDownRefresh() {
				let that = this
				that.page = 1
				that.getInfoList()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000)
			}
		},
		computed: {

		},
		components: {
			uniFab
		},
		filters: {
			numFilter: (value) => {
				if (!isNaN(value) && value != '') {
					return parseFloat(value).toFixed(2)
				} else {
					return value
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
